<template>
  <div class="todo-container">
    <!-- <div class="todo-wrap">
      <Header :addTodo="addTodo" />
      <List :todos="todos" :deleteTodo="deleteTodo" :updateTodo="updateTodo" />
      <Footer
        :todos="todos"
        :updateAllTodo="updateAllTodo"
        :deleteSelected="deleteSelected"
      />
    </div> -->
    <!-- <a :href="hrefUrl" class="btn"></a> -->
    <LinkedmeTest> </LinkedmeTest>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import List from "./components/List";
import { reactive, defineComponent, toRefs, watch, onMounted, ref } from "vue";
import { saveTodos, readTodos } from "./utils/localStorageUtil.ts";
import LinkedmeTest from "./views/linkedme/linkedme-test.vue";
// import { Todo } from './types/todo';
export default defineComponent({
  name: "App",
  components: {
    // Header,
    // Footer,
    // List,
    LinkedmeTest
  },
  setup() {
    const hrefUrl = ref("");
    // const state = reactive<{ todos: Todo[] }>({
    const state = reactive({
      todos: []
    });
    // 界面加载一会后读取数据
    onMounted(() => {
      setTimeout(() => {
        state.todos = readTodos();
      }, 500);
    });

    // 清除已完成任务
    const deleteSelected = () => {
      state.todos = state.todos.filter(item => !item.isCompleted);
    };
    // 修改全部todos的isCompleted的状态
    const updateAllTodo = isCheckAll => {
      console.log("isCheckAll", isCheckAll);
      state.todos.forEach(item => {
        item.isCompleted = isCheckAll;
      });
    };
    // 修改todo的isCompleted的状态
    const updateTodo = (todo, isCompleted) => {
      todo.isCompleted = isCompleted;
      console.log(todo);
      console.log(state.todos);
    };
    // 添加数据的方法
    const addTodo = todo => {
      state.todos.unshift(todo);
    };
    // 删除数据的方法
    const deleteTodo = index => {
      state.todos.splice(index, 1);
    };
    // 监视操作：如果todos数组发生变化，直接存储到浏览器的缓存中
    // watch(
    //   () => state.todos,
    //   value => {
    //     localStorage.setItem("todo_key", JSON.stringify(value));
    //   },
    //   { deep: true }
    // );

    // 第一种写法
    // watch(
    //   () => state.todos,
    //   value => {
    //     saveTodos(value);
    //   },
    //   { deep: true }
    // );
    // 第一种中因为watch第二个参数为可简写回调， 没必要回调中只调用了方法，所以就直接调用方法
    watch(() => state.todos, saveTodos, { deep: true });
    return {
      ...toRefs(state),
      hrefUrl,
      updateTodo,
      addTodo,
      deleteTodo,
      updateAllTodo,
      deleteSelected
    };
  }
});
</script>

<style>
.todo-container {
  height: 100vh;
  width: 100vw;
}
* {
  margin: 0;
  padding: 0;
}
</style>
